<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>忘记密码 | 机械配件商城</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="./element-ui/index.css">
    <link rel="stylesheet" type="text/css" href="components/min-width-container.css" />
    <link rel="stylesheet" type="text/css" href="components/header-simple.css">
    <link rel="stylesheet" type="text/css" href="components/footer-bottom.css">
    <link rel="stylesheet" type="text/css" href="components/footer-image.css">
    <style>
        .app-content{
            padding-left: 188px;
            padding-top: 50px;
            padding-bottom: 100px;
        }

        .app-content-form{
            width: 360px;
        }

        .app-content-form-item{
            display: flex;
            align-items: center;
            height: 64px;
        }

        .app-content-form-item > div:first-child{

        }

        .app-content-form-item > div:last-child{
            flex-grow: 1;
        }
    </style>
</head>
<body>
<div id="app">
    <header-simple></header-simple>
    <min-width-container>
        <div class="app-content">
            <div class="app-content-form m-t-20">
                <el-steps :active="1" align-center>
                    <el-step title="身份验证" description="已完成"></el-step>
                    <el-step title="密保问题验证" description="进行中"></el-step>
                    <el-step title="重置密码" description=""></el-step>
                </el-steps>
                <br><br>
                <h5>为了您的账户安全请先验证以下安全工具：</h5><br><br>
                <el-form ref="form" :model="form" :rules="rules"  label-width="100px">
                    <el-form-item label="提示问题:" >
                        <el-input size="mini" v-model="form.question" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="答案:" >
                        <el-input size="mini" v-model="form.answer" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="next_step">下一步</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </min-width-container>
    <footer-image></footer-image>
    <footer-bottom></footer-bottom>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./element-ui/index.js"></script>
<script src="components/min-width-container.js"></script>
<script src="components/header-simple.js"></script>
<script src="components/footer-bottom.js"></script>
<script src="components/footer-image.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data(){
            return {
                form: {
                    question:"问题加载中...",
                    answer: "",
                },
                acknowledge: "",
                rules:{
                    answer: [
                        { required: true, message: '请输入答案', trigger: 'blur' },
                    ],
                }
            };
        },
        created(){
            const temp_user = JSON.parse(sessionStorage.getItem("temp_user"));
            if(temp_user == null){
                this.$message.error("请先验证身份");
                return;
            }
            //获取问题
            const params = new URLSearchParams();
            params.append("account", temp_user.account);
            axios.post("/user/getuserquestion.do", params).then(response=>{
                if(response.data.status === 0){
                    this.form.question = response.data.data;
                }else{
                    this.$message(response.data.msg);
                    this.form.question = temp_user.question;
                }
            }).catch(err=>{
                console.log(err);
                this.$message.error("连接服务器出现异常");
            });

        },
        methods: {
            next_step(){
                const temp_user = JSON.parse(sessionStorage.getItem("temp_user"));
                if(temp_user == null){
                    this.$message.error("请先验证身份");
                    return;
                }
                const params = new URLSearchParams();
                params.append("account", temp_user.account);
                params.append("question", this.form.question);
                params.append("asw", this.form.answer);
                axios.post("/user/checkuserasw.do", params).then(response=>{
                    if(response.data.status === 0){
                        sessionStorage.setItem("pass", true);
                        window.location.href = "/password-forget3.html";
                    }else{
                        if(response.data.msg){
                            this.$message(response.data.msg);
                        }
                    }
                }).catch(err=>{
                    console.log(err);
                    this.$message.error("连接服务器出现异常");
                });
            }
        }
    });

</script>
</body>
</html>